﻿@page "/component/input/checkbox"

<Pager DataSource="@(new List<string>
                   {
                       "Checkbox","Radio","Read-only","Disabled","Fitted","Inverted","Right Align"
                   })">
    <Body>
        <Header1>
            Checkbox
            <SubHeader>A checkbox allows a user to select a value from a small set of options, often binary</SubHeader>
        </Header1>
        <PresentationPart Title="Checkbox">
            <RunTemplate>
                <CheckBox @bind-Value="Agree">Standard</CheckBox>
                <br />
                <CheckBox @bind-Value="Toggle" Style="CheckBoxStyle.Switch">Switch</CheckBox>
                <br />
                <CheckBox @bind-Value="Slider" Style="CheckBoxStyle.Slider">Slider</CheckBox>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<CheckBox @bind-Value=""Agree"">Standard</CheckBox>
<CheckBox @bind-Value=""Toggle"" Style=""CheckBoxStyle.Switch"">Switch</CheckBox>
<CheckBox @bind-Value=""Slider"" Style=""CheckBoxStyle.Slider"">Slider</CheckBox>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Radio">
            <Description>
                <code>RadioGroup</code> is a container for each <code>RadioBox</code> of option.
            </Description>
            <RunTemplate>
                <RadioGroup @bind-Value="Fruit" DisplayName="Please choose one fruit">
                    <RadioBox Value="@("Apple")" >Apple</RadioBox>
                    <RadioBox Value="@("Banana")">Banana</RadioBox>
                    <RadioBox Value="@("Orange")">Orange</RadioBox>
                </RadioGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<RadioGroup @bind-Value=""Fruit"" DisplayName=""Please choose one fruit"">
    <RadioBox Value=""@(""Apple"")"" >Apple</RadioBox>
    <RadioBox Value=""@(""Banana"")"">Banana</RadioBox>
    <RadioBox Value=""@(""Orange"")"">Orange</RadioBox>
</RadioGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Read-only">
            <Description>
                A checkbox can be read-only and unable to change states
            </Description>
            <RunTemplate>
                <CheckBox ReadOnly @bind-Value="Agree">Standard</CheckBox>
                <br />
                <CheckBox ReadOnly @bind-Value="Toggle" Style="CheckBoxStyle.Switch">Switch</CheckBox>
                <br />
                <CheckBox ReadOnly @bind-Value="Slider" Style="CheckBoxStyle.Slider">Slider</CheckBox>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<CheckBox ReadOnly @bind-Value=""Agree"">Standard</CheckBox>
<CheckBox ReadOnly @bind-Value=""Toggle"" Style=""CheckBoxStyle.Switch"">Switch</CheckBox>
<CheckBox ReadOnly @bind-Value=""Slider"" Style=""CheckBoxStyle.Slider"">Slider</CheckBox>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Disabled">
            <Description>
                A checkbox can show it is currently unable to be interacted with
            </Description>
            <RunTemplate>
                <CheckBox Disabled @bind-Value="Agree">Standard</CheckBox>
                <br />
                <CheckBox Disabled @bind-Value="Toggle" Style="CheckBoxStyle.Switch">Switch</CheckBox>
                <br />
                <CheckBox Disabled @bind-Value="Slider" Style="CheckBoxStyle.Slider">Slider</CheckBox>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<CheckBox Disabled @bind-Value=""Agree"">Standard</CheckBox>
<CheckBox Disabled @bind-Value=""Toggle"" Style=""CheckBoxStyle.Switch"">Switch</CheckBox>
<CheckBox Disabled @bind-Value=""Slider"" Style=""CheckBoxStyle.Slider"">Slider</CheckBox>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Fitted">
            <Description>
                A fitted checkbox does not leave padding for a label, so please DO NOT insert any content!
            </Description>
            <RunTemplate>
                <CheckBox Fitted @bind-Value="Agree"/>
                <br />
                <CheckBox Fitted @bind-Value="Toggle" Style="CheckBoxStyle.Switch"/>
                <br />
                <CheckBox Fitted @bind-Value="Slider" Style="CheckBoxStyle.Slider"/>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<CheckBox Fitted @bind-Value=""Agree""/>
<CheckBox Fitted @bind-Value=""Toggle"" Style=""CheckBoxStyle.Switch""/>
<CheckBox Fitted @bind-Value=""Slider"" Style=""CheckBoxStyle.Slider""/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inverted">
            <Description>
                A inverted checkbox
            </Description>
            <RunTemplate>
                <Segment Inverted>
                <CheckBox Inverted @bind-Value="Agree">Standard</CheckBox>
                <br />
                <CheckBox Inverted @bind-Value="Toggle" Style="CheckBoxStyle.Switch">Switch</CheckBox>
                <br />
                <CheckBox Inverted @bind-Value="Slider" Style="CheckBoxStyle.Slider">Slider</CheckBox>
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<CheckBox Inverted @bind-Value=""Agree"">Standard</CheckBox>
<CheckBox Inverted @bind-Value=""Toggle"" Style=""CheckBoxStyle.Switch"">Switch</CheckBox>
<CheckBox Inverted @bind-Value=""Slider"" Style=""CheckBoxStyle.Slider"">Slider</CheckBox>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Right Align">
            <Description>Let the control to be right of label</Description>
            <RunTemplate>
                <CheckBox RightAlign @bind-Value="Agree">Standard</CheckBox>
                <br />
                <CheckBox RightAlign @bind-Value="Toggle" Style="CheckBoxStyle.Switch">Switch</CheckBox>
                <br />
                <CheckBox RightAlign @bind-Value="Slider" Style="CheckBoxStyle.Slider">Slider</CheckBox>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<CheckBox RightAlign @bind-Value=""Agree"">Standard</CheckBox>
<CheckBox RightAlign @bind-Value=""Toggle"" Style=""CheckBoxStyle.Switch"">Switch</CheckBox>
<CheckBox RightAlign @bind-Value=""Slider"" Style=""CheckBoxStyle.Slider"">Slider</CheckBox>
```
")
            </CodeTemplate>
        </PresentationPart>
    </Body>
</Pager>

@code{
    bool Agree { get; set; }
    bool Toggle { get; set; }
    bool Slider { get; set; }
    string Fruit { get; set; }
}